<template>
  <h1>订单列表</h1>
  <hr />
  <el-form :inline="true" label-width="120px">
    <el-form-item label="状态：">
      <el-select v-model="query" filterable clearable placeholder="全部订单" @change="getSearch">
        <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <!-- <el-form-item>
      <el-button type="primary" @click="getSearch">查询</el-button>
    </el-form-item> -->
  </el-form>
  <el-table v-loading="loading" :data="orderList.slice(0, 100)" style="width: 100%">
    <el-table-column fixed prop="orderid" label="订单编号" width="80" />

    <el-table-column prop="userid" label="标识" width="80" />

    <el-table-column prop="status" label="状态" width="150">

      <template #default="scope">
        <!-- 0 未支付 1 待发货 2 待收获 3 待评价 4 已完成 其他 待付款 -->
        <!-- <span v-if="scope.row.status===0"><el-icon color="red" size="15px"><FolderDelete /></el-icon>未支付</span>
        <span v-else-if="scope.row.status===1"><el-icon color="orange" size="20px"><TakeawayBox /></el-icon>待发货</span>
        <span v-else-if="scope.row.status===2"><el-icon color="plum" size="20px"><Bicycle /></el-icon>待收货</span>
        <span v-else-if="scope.row.status===3"><el-icon color="grey" size="20px"><DocumentDelete /></el-icon>待评价</span>
        <span v-else-if="scope.row.status===4"><el-icon color="green" size="20px"><FolderChecked /></el-icon>已完成</span>
        <span v-else><el-icon color="yellow" size="20px"><FolderAdd /></el-icon>待付款</span> -->
        <el-select v-model="scope.row.status" filterable @change="getEdit(scope.row.orderid, scope.row.status)">
          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <!-- <el-icon><Edit /></el-icon> -->
      </template>
    </el-table-column>

    <el-table-column prop="proname" label="商品名称" width="200" />
    <el-table-column prop="originprice" label="商品价格" width="110" />
    <el-table-column prop="proid" label="商品编号" width="200" />
    <el-table-column label="图片" width="200">
      <template #default="scope">
        <img class="img" :src="scope.row.img1" />
      </template>
    </el-table-column>
    <el-table-column prop="discount" label="折扣" width="80" />
    <el-table-column prop="num" label="数量" width="80" />
    <el-table-column prop="time" label="时间" width="110" />
    <el-table-column prop="name" label="收货人" width="80" />
    <el-table-column prop="tel" label="电话" width="80" />
    <el-table-column prop="province" label="省份" width="80" />
    <el-table-column prop="city" label="城市" width="80" />
    <el-table-column prop="county" label="县区" width="80" />
    <el-table-column prop="addressDetail" label="具体地址" width="80" />
  </el-table>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import service from "../../../utils/service";

import { ElMessage } from 'element-plus'
import {
  FolderDelete,
  TakeawayBox,
  Bicycle,
  DocumentDelete,
  FolderChecked,
  FolderAdd,
  Edit
} from '@element-plus/icons-vue'

let loading = ref(true)


interface IOrder {
  name: string;
  tel: string;
  province: string;
  city: string;
  county: string;
  addressDetail: string;
  orderid: string;
  userid: string;
  status: number;
  proname: string;
  proid: string;
  originprice: number;
  img1: string;
  discount: number;
  num: number;
  time: string;
}
const orderList = reactive<IOrder[]>([]);

// 搜索订单状态
const query = ref('');

// <!-- 0 未支付 1 待发货 2 待收货 3 待评价 4 已完成 其他 待付款 -->

const status = [{
  value: 0,
  label: '未支付'
},
{
  value: 1,
  label: '待发货'
},
{
  value: 2,
  label: '待收货'
},
{
  value: 3,
  label: '待评价'
},
{
  value: 4,
  label: '已完成'
},
{
  value: 5,
  label: '待付款'
}
];

// 获取商品数据
const getOrderList = () => {
  loading.value = true
  service({
    url: "/order/list",
    data: orderList
  }).then((res) => {
    if (res.data.code === "200") {
      orderList.length = 0;
      // orderList.push(res.data.data[0]); //第一条数据
      orderList.push(...res.data.data); //全部

      loading.value = false
    }
  });
};
getOrderList();

// 获取搜索信息
const getSearch = () => {
  if (query.value === '') {
    getOrderList();

  } else {

    loading.value = true
    // console.log(query.value);
    service({
      url: "/admin/order/statusList",
      params: { status: query.value }
    }).then((res) => {
      if (res.data.code === "200") {
        orderList.length = 0
        orderList.push(...res.data.data);
        // console.log(res.data.data)
        loading.value = false
      }
    });
  }
};
getSearch();

// 修改订单状态
const getEdit = (orderid: string, status: number) => {
  service({
    url: "/admin/order/updateStatus",
    params: {
      orderid: orderid,
      status: status
    }
  }).then((res) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "更改订单状态成功！",
        type: "success",
      });
      loading.value = false
    }
  });
}



</script>

<style scoped>
.img {
  width: 200px;
  height: 150px;
}
</style>